<template>
	<div class="collectionAblum scrollbar size" id="style-2">
		<div class="block" v-for="ablum in allData" :key="ablum.shareId">
			<el-image style="width: 100px; height: 100px" :src="$store.state.baseHttp+ablum.ablumCoverPath" @click="shareView(ablum)"
			 fit="cover">

			</el-image>
			<span class="ablumName">{{ablum.ablumName}}</span>
			<div class="TreenSign">
				<div class="bottomHead fl" @click="toUser(ablum)"><img :src="$store.state.baseHttp+ablum.userCoverPath" alt=""></div>
				<span class="userid">{{ablum.ablumName}}</span>
				<span class="updataTime">刚刚</span>
				<img class="collectionIcon" @click="isCollection(ablum)" src="@/assets/pngImg/collection.png" alt="">
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				allData: []
			}
		},
		created() {
			this.getdata()
		},
		activated() {
			this.getdata()
		},
		methods: {
			// 获取数据
			getdata() {
				this.$http.get('/api/user/' + this.$store.state.toUserId + '/collections').then((res) => {
					let Ddata = this.$shareClass.DUsercollect(res.data)
					this.allData = Ddata
					console.log(Ddata)
				})
			},
			// 分享页
			shareView(ablum) {
				console.log(ablum)
				window.open(this.$store.state.localhost + 'shareView/' + ablum.shareId)
			},
			//用户信息页
			toUser(ablum) {
				console.log(ablum)
				//录入目标用户信息
				this.$store.commit('updataUserId', ablum.userId)
				this.$router.push('/userMessage')
			},
			// 取消收藏
			cancelCollection(ablum) {
				let Cdata = this.$shareClass.CsquareUnColloct(ablum.shareId)
				console.log(Cdata)
				this.$http.post('/api/share', Cdata).then(res => {
					this.getdata();
					this.$message.success('取消收藏成功！')
				})
			},
			// 取消收藏
			isCollection(ablum) {
				this.$confirm('此操作将取消收藏该相册, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.cancelCollection(ablum)
					this.$message({
						type: 'success',
						message: '取消收藏成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消操作'
					});
				});
			}
		}
	}
</script>

<style scoped="scoped">
	.size {
		min-height: 85%;
		min-width: 99%;
	}

	.collectionAblum {
		width: 100%;
		height: 95%;
		padding-top: 25px;
		display: flex;
		flex-wrap: wrap;
		/* justify-content: space-around; */
		background-color: #f3f9f9;
	}

	.block {
		position: relative;
		height: 210px;
		width: 28%;
		border-radius: 5px;
		overflow: hidden;
		margin-left: 40px;
		margin-bottom: 40px;
		border: #ecefef solid 2px;
		cursor: pointer;
	}

	.block:nth-of-type(3n) {
		margin-right: 0;
	}

	.el-image {
		height: 210px !important;
		width: 300px !important;
	}

	.block .TreenSign {
		position: absolute;
		height: 64px;
		width: 100%;
		bottom: 0;
		left: 0;
		background-color: rgba(203, 208, 208, .8);
		color: white;
	}

	.bottomHead {
		width: 50px;
		height: 50px;
		overflow: hidden;
		border: solid #FFFDEF 1px;
		border-radius: 50%;
		margin-left: 10px;
		margin-top: 5px;
	}

	.bottomHead img {
		width: 50px;
		height: 50px;
	}

	.userid {
		position: absolute;
		top: 20px;
		left: 80px;
		font-size: 18px;
	}

	.updataTime {
		position: absolute;
		bottom: 10px;
		right: 20px;
		font-size: 12px;
		color: #00a500;
	}

	.ablumName {
		position: absolute;
		display: block;
		width: 100%;
		top: 0;
		text-align: center;
		font-size: 20px;
		left: 0;
		background-color: rgba(0, 0, 0, .3);
		color: #fffce7;
		padding: 5px 0;
	}

	.collectionIcon {
		position: absolute;
		right: 5px;
		top: 10px;
		width: 25px;
		height: 25px;
		cursor: pointer;
	}
</style>
